<template>
  <div>
    <h2 v-color="'pink'">自定义指令</h2>
    <input type="text" v-focus="true" v-model.number="account" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      account: "",
    };
  },
  /* 局部指令 */
  directives: {
    /* 会自动添加 v- 前缀 */
    focus: {
      // 指令与元素成功绑定
      bind(element, binding) {
        console.log("bind");
      },
      // 指令所在的元素被插入页面时
      inserted(element, binding) {
        // binding 代表当前指令的所有信息 可以通过 value 拿到指令的属性值
        if (binding.value) {
          element.focus();
        }
      },
      // 指令所在的模板被重新解析
      update(element, binding) {
        console.log("update");
      },
    },
  },
};
</script>

<style>
</style>